<template>
	<view>
		<!-- <view :animation="anData" style="height:0;">
			测试：2022723
		</view> -->
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToview">
			<!-- 			<view class="first">
				<view class="first-kef">
					<image class="kef_tu" src="../../static/kefutu.png" mode="aspectFill"></image>
					<view class="first-">
						<view class="kef_zi">
							<text class="first-kef_zi">亲，请您核对订单信息</text>
							<view class="first-kef_tw">
								<view class="first-kef_tw_">
									<image class="first-kef_tw-tu" src="/static/sp.png" mode="aspectFill"></image>
									<text class="first-kef_tw-zi">123456</text>
								</view>
							</view>
							<view class="lianxi">

								<view class="lianxi-">
									<text class="lianxi-fs">联系方式 ：</text>
									<text class="lianxi-dh">1848486646</text>
								</view>

								<view class="lianxi-">
									<text class="lianxi-fs">配送地址 ：</text>
									<text class="lianxi-dh">美国加利福利亚州旧金山市唐人街道什么勾八校区唐人街大学这个校区校园收发室</text>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view> -->

			<view class="chat-main" :style="{paddingBottom:inputh+'px'}">
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" :id="'msg'+item.tip">
					<view class="chat-time">{{item.time}}</view>
					<view class="msg-m msg-left" v-if="item.id !='b'">
						<image :src="item.imgurl" mode="aspectFill" class="user-img"></image>
						<view class="renyunle" v-if="item.types == 3">
							<view class="kkkk">
								<view class="qinqr">亲，请你核对订单信息</view>
								<view class="shangpxinxi">
									<view class="ryl">
										<image src="../../static/sp.png" mode="aspectFill" class="sailuo"></image>
										<view class="tuzi">
											<view class="zero-text">{{item.message}}</view>
											<view class="tuzi-text">{{item.text}}</view>
										</view>
									</view>
									<view class="xdd">{{item.xm}}</view>
									<view class="xdd">{{item.dh}}</view>
									<view class="xdd">{{item.dz}}</view>
									<!-- 这个样式只触发一次，而且触发的是本来静态的，后来发送的不会触发 -->
									<view class="queren">
										<view class="yes" @click="yes" id="queren">确认</view>
									</view>
								</view>
							</view>
						</view>
						<view class="messages" v-if="item.types == 0">
							<view class="msg-text">{{item.message}} </view>
						</view>
						<view class="messages" v-if="item.types == 1">
							<image :src="item.imgurl" mode="aspectFill" class="msg-img"></image>
						</view>
					</view>
					<view class="msg-m msg-right" v-if="item.id =='b'">
						<image :src="item.imgurl" mode="aspectFill" class="user-img"></image>
						<view class="renyunle-er" v-if="item.types == 3">
							<view class="otms">
								<view class="ddh">
									<text class="ddh-">订单号：12138</text>
									<text class="ddh-time">11-15 12：30</text>
								</view>
								<view class="spxx">
									<view class="spxxhz">
										<image src="../../static/4.png" mode="aspectFill" class="qintz"></image>
										<view class="tuzi">
											<view class="zero-text">{{item.message}}</view>
											<view class="tuzi-text">{{item.text}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="messages" v-if="item.types == 0">
							<view class="msg-text">{{item.message}} </view>
						</view>
						<view class="messages" v-if="item.types == 1">
							<image :src="item.imgurl" mode="aspectFill" class="msg-img"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<submit @inputs="inputs" @heights="heights" @enterorder="enterorder"></submit>
	</view>
</template>

<script>
	// import add from '@/shagou.js';
	import submit from '../../components/submit/submit.vue'
	import datas from '../../commons/js/datas.js'
	// const nowTime = new Date().getTime()
	export default {
		onLoad: function() {
			this.getMsg();
		},
		//定义组件
		components: {
			submit,
		},
		data() {
			return {
				msgs: [],
				scrollToview: '',
				inputh: '60',
				color: 'black',
			}
		},
		methods: {
			yes: function(queren) {
				var queren = document.getElementById('queren');
				queren.style.backgroundColor = "#e1e1e1";
				console.log();
			},
			//获取高度
			// getElementHeight:function(){
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('.submit').boundingClientRect(data =>{
			// 		this.$emit('heights',data.height);
			// 	}).exec();
			// },
			//发送订单，目前为止我能想到的了
			enterorder: function(e) {
				setTimeout(() => {
					let len = this.msgs.length;
					let data = {
						id: 'a',
						imgurl: '../../static/kefutu.png',
						message: '这是你的订单',
						text: '请确认你的订单ultraman,￥9999',
						types: 3,
						time: new Date(),
						tip: len,
						xm: '姓名： XXX',
						dh: '电话： 1811XXX66',
						dz: '地址： 美国加利福利亚州旧金山市唐人街道什么勾八校区唐人街大学这个校区校园收发室',

					};
					this.msgs.push(data);
					this.$nextTick(function() {
						this.scrollToview = 'msg' + this.len;
					})
					console.log(e)
				}, 3000);
				let len = this.msgs.length;
				let data = {
					id: 'b',
					imgurl: '../../static/kefutu.png',
					message: 'transfomer optimus black apple mpm04 bigger',
					text: '￥9999 完成',
					types: 3,
					time: new Date(),
					tip: len,

				};
				this.msgs.push(data);

				this.$nextTick(function() {

					this.scrollToview = 'msg' + this.len;
				})
				console.log(e)
			},
			getMsg: function() {
				let msg = datas.message();
				for (let i = 0; i < msg.length; i++) {
					msg[i].imgurl = '../../static/' + msg[i].imgurl;
					if (msg[i].types == 1) {
						msg[i].message = '../../static/' + msg[i].message;
					}
					this.msgs.unshift(msg[i]);
				}
				this.$nextTick(function() {
					this.scrollToview = 'msg' + this.msgs[i - 1].tip;
				})
				console.log(this.msgs)
			},
			inputs: function(e) {
				let len = this.msgs.length;
				let data = {
					id: 'b',
					imgurl: '../../static/kefutu.png',
					message: e,
					types: 0,
					time: new Date(),
					tip: len,

				};
				this.msgs.push(data);

				this.$nextTick(function() {

					this.scrollToview = 'msg' + this.len;
				})
				console.log(e)
			},

			heights: function(e) {
				this.inputh = e;
				this.goBottom();
				console.log('高度' + e);

			},
			//滚动到底部
			goBottom: function() {
				this.scrollToview = '';
				this.$nextTick(function() {
					let len = this.msgs.length - 1;
					this.scrollToview = 'msg' + this.msgs[len].tip;
				})
			}

		}

	}
</script>

<style lang="scss">
	// .second {
	// 	display: flex;
	// 	position: fixed;
	// 	bottom: 0;
	// }
	// .backcolor {
	// 	background-color: #ff6854;
	// }
	.backcolor{
		background-color: #d9d9d9;
	}

	.yes {
		background-color: #ff6854;
		color: white;
		font-size: 25rpx;
		border-radius: 10rpx;
		padding: 5rpx;
		width: 60rpx;
		text-align: center;
	}

	.queren {
		display: flex;
		justify-content: flex-end;
		padding: 15rpx;
	}

	.kkkk {
		padding: 15rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		height: 100%;
	}

	.qinqr {
		margin: 10rpx;
		font-size: 30rpx;
		font-weight: 600;


	}

	.shangpxinxi {
		height: 100%;
		display: flex;
		justify-content: space-around;
		flex-direction: column;



	}

	.ryl {
		display: flex;
		width: 100%;
		background-color: #fafafa;
		height: 80rpx;
	}

	.sailuo {
		flex: none;
		width: 80rpx;
		height: 80rpx;
	}

	.tuzi {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		width: 96%;
		padding-left: 10rpx;
		// background-color: #e7e7e7;


	}

	.zero-text {
		font-size: 30rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.tuzi-text {
		font-size: 25rpx;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #484848;
	}
	.xdd {
		font-size: 25rpx;
		font-weight: 500;
		color: #232323;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #484848;
	}
	.otms {
		display: flex;
		// padding: 20rpx;
		flex-direction: column;
		justify-content: space-between;
		.spxx{
			// margin: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.spxxhz{
				display: flex;
				width: 96%;
				background-color: #fafafa;
				border-radius: 20rpx;
				align-items: center;
				.qintz{
					width: 90rpx;
					height: 90rpx;
					flex: none;
					padding: 10rpx;
				}
			}
		}
		.ddh {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;

			.ddh- {
				font-size: 25rpx;

			}

			.ddh-time {
				font-size: 25rpx;
			}
		}

		.spxx {
			display: flex;

		}
	}

	.renyunle-er {
		width: 500rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.renyunle {

		width: 500rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.msg-img {
		max-width: 400rpx;
		border-radius: 20rpx;
		margin-left: 16rpx;
	}

	.chat {
		height: 100%;
		padding-bottom: 20rpx;
		.chat-main {
			padding-left: 20rpx;
			padding-top: 100rpx;
			padding-right: 20rpx;
			// padding-bottom: 120rpx;

			.chat-ls {
				display: flex;
				flex-direction: column;

				.chat-time {
					font-size: 25rpx;
					font-weight: 200;
					color: #2b2b2b;
					padding: 20rpx 0;
					text-align: center;
				}

				.msg-right {
					display: flex;
					flex-direction: row-reverse;

					.msg-text {
						background-color: #d5f1ff;
						border-radius: 20rpx 0 20rpx 20rpx;
						margin-right: 16rpx;
						font-size: 25rpx;
					}

				}

				.msg-left {
					display: flex;
					flex-direction: row;

					.msg-text {
						background-color: #fff;
						border-radius: 0 20rpx 20rpx 20rpx;
						margin-left: 16rpx;
						font-size: 25rpx;
					}

				}

				.msg-m {
					display: flex;
					padding: 20rpx 0;

					.user-img {
						width: 80rpx;
						height: 80rpx;
						flex: none;
						border-radius: 50rpx;
					}

					.messages {
						// font-size: $uni-font-size-lg;
						// color: $uni-text-color;
						// line-height: 44rpx;

						max-width: 480rpx;

						.msg-text {
							font-size: $uni-font-size-lg;
							color: $uni-text-color;
							line-height: 44rpx;
							padding: 18rpx 24rpx;
						}
					}
				}
			}


		}
	}
	.first {
		margin-top: 80rpx;
		width: 100%;
		.first-kef {
			display: flex;
			align-items: flex-start;
			padding-left: 20rpx;
			.first- {
				margin-left: 20rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				width: 500rpx;
				height: 500rpx;

				.kef_zi {
					width: 92%;
					height: 92%;
					display: flex;
					flex-direction: column;

					.lianxi {
						margin-top: 40rpx;
						display: flex;
						justify-content: space-around;
						flex-direction: column;
						height: 100%;
						width: 100%;

						.lianxi- {
							display: flex;

							.lianxi-dh {

								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								-webkit-box-orient: vertical;
								font-size: 23rpx;
							}

							.lianxi-fs {
								font-size: 25rpx;
								white-space: nowrap;
							}


						}

					}

					.first-kef_tw {
						background-color: #f8f8f8;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;

						.first-kef_tw_ {
							display: flex;
							width: 100%;
							height: 100%;

							.first-kef_tw-zi {
								white-space: nowrap;
								font-size: 30rpx;
								font-weight: 400;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								width: 100%;
								margin-left: 10rpx;
							}

							.first-kef_tw-tu {
								height: 120rpx;
								width: 120rpx;
								flex-shrink: 0;
							}
						}
					}

					.first-kef_zi {
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}

			.kef_tu {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;

			}
		}

	}







	page {
		height: 100%;
		background-color: #f8f8f8;
	}
	.flex-column-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
